import{d as t,M as l,A as d,h as s}from"./Anchors-CRD96j4l.js";import{D as c,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const o={path:"/form/progress",name:"progress",title:"Progress 进度条"};function n(r){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...r.components};return l(s,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),o.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(c,{columns:2}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Progress, Space } from "cui-solid";

export default () => {
    return <Space dir="v">
        <Progress value={30} />
        <Progress value={50} status="active"/>
        <Progress value={70} status="error"/>
        <Progress value={100} />
    </Space>
}`,scopes:void 0,children:t(e.p,{children:"基础用法"})}),t(i,{id:"inside",title:"内部文案",src:"2inside.demo.tsx",code:`import { Progress, Space } from "cui-solid";

export default () => {
    return <Space dir="v">
        <Progress value={70} textInside strokeWidth={16}/>
        <Progress value={70} textInside strokeWidth={16} status="active"/>
        <Progress value={100} textInside strokeWidth={16}/>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"textInside"})," 可以让文案显示在内部"]})}),t(i,{id:"strokewidth",title:"宽度",src:"3strokewidth.demo.tsx",code:`import { Progress, Space } from "cui-solid";

export default () => {
    return <Space dir="v">
        <Progress value={70} strokeWidth={5}/>
        <Progress value={70} textInside strokeWidth={16} status="active"/>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["通过 ",t(e.code,{className:"sp-inline-code",children:"strokeWidth"})," 可以自定义进度条的粗细"]})}),t(i,{id:"hide",title:"隐藏文案",src:"4hide.demo.tsx",code:`import { Progress, Space } from "cui-solid";

export default () => {
    return <Space dir="v">
        <Progress value={70} hidePercent/>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["通过 ",t(e.code,{className:"sp-inline-code",children:"hidePercent"})," 可以隐藏文案"]})}),t(i,{id:"control",title:"控制",src:"5control.demo.tsx",code:`import { Button, Icon, Progress, Space } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [value, setValue] = createSignal(0);

    return <Space dir="v">
        <Progress value={value()} />
        <Space dir="h">
            <Button type="primary" icon={<Icon name="plus"/>} onClick={() => {
                setValue(value() + 1);
            }} />
            <Button type="primary" icon={<Icon name="minus"/>} onClick={() => {
                setValue(value() - 1);
            }} />
        </Space>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"value"})," 可控参数"]})}),t(i,{id:"color",title:"渐变色",src:"6color.demo.tsx",code:`import { Progress } from "cui-solid";

export default () => {
    return <Progress value={50} strokeColor={['#108ee9', '#87d068', '#d9363e']}/>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"strokeColor"})," 传入数组的时候可显示渐变色"]})}),t(i,{id:"circle",title:"圆形",src:"7circle.demo.tsx",code:`import { Button, Icon, Progress, Space } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [value, setValue] = createSignal(0);

    return <>
        <Space dir="h" inline>
            <Progress type="circle" value={value()}/>
        </Space>
        <Space dir="h">
            <Button type="primary" icon={<Icon name="plus"/>} onClick={() => {
                setValue(value() + 5);
            }} />
            <Button type="primary" icon={<Icon name="minus"/>} onClick={() => {
                setValue(value() - 5);
            }} />
        </Space>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置",t(e.code,{className:"sp-inline-code",children:"type='circle'"})," 可以渲染圆形进度条"]})}),t(i,{id:"colors",title:"色阶",src:"8colors.demo.tsx",code:`import { Button, Icon, Progress, Space } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [value, setValue] = createSignal(0);

    return <>
        <Space dir="h" inline>
            <Progress type="circle" value={value()} strokeColor={[
                {percent: 20, color: '#108ee9'},
                {percent: 50, color: '#87d068'},
                {percent: 70, color: '#d9363e'}
            ]}/>
        </Space>
        <Space dir="h">
            <Button type="primary" icon={<Icon name="plus"/>} onClick={() => {
                setValue(value() + 5);
            }} />
            <Button type="primary" icon={<Icon name="minus"/>} onClick={() => {
                setValue(value() - 5);
            }} />
        </Space>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"strokeColor"})," 数组可以在不同进度阶段 显示不同颜色"]})}),t(i,{id:"render",title:"自定义文案",src:"9render.demo.tsx",code:`import { Progress, Space } from "cui-solid";

export default () => {
    return <>
        <Space dir="h" inline>
            <Progress type="circle" value={100} infoRender={(sta: string, value: number) => {
                if (value === 100) {
                    return '完成'
                } else {
                    return '进行中'
                }
            }}/>
        </Space>
    </>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"infoRender"})," 函数可以自定义渲染提示文案"]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"hidePercent"}),t(e.td,{style:{textAlign:"left"},children:"隐藏百分比"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"status"}),t(e.td,{style:{textAlign:"left"},children:"状态"}),t(e.td,{style:{textAlign:"left"},children:"normal | error | active | success"}),t(e.td,{style:{textAlign:"left"},children:"normal"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"value"}),t(e.td,{style:{textAlign:"left"},children:"可控值"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"strokeWidth"}),t(e.td,{style:{textAlign:"left"},children:"宽度"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"textInside"}),t(e.td,{style:{textAlign:"left"},children:"内显文案"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"infoRender"}),t(e.td,{style:{textAlign:"left"},children:"自定义文案"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"strokeColor"}),t(e.td,{style:{textAlign:"left"},children:"颜色"}),t(e.td,{style:{textAlign:"left"},children:"string  |  string[]  |  StrokeProps[]"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"type"}),t(e.td,{style:{textAlign:"left"},children:"类型"}),t(e.td,{style:{textAlign:"left"},children:"line | circle"}),t(e.td,{style:{textAlign:"left"},children:"line"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"radius"}),t(e.td,{style:{textAlign:"left"},children:"半径"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"},children:"60"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"max"}),t(e.td,{style:{textAlign:"left"},children:"最大值"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"},children:"100"})]})]})]})]}),`
`,`
`,`
`,t(d,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"inside",title:"内部文案",src:"2inside.demo.tsx"},{id:"strokewidth",title:"宽度",src:"3strokewidth.demo.tsx"},{id:"hide",title:"隐藏文案",src:"4hide.demo.tsx"},{id:"control",title:"控制",src:"5control.demo.tsx"},{id:"color",title:"渐变色",src:"6color.demo.tsx"},{id:"circle",title:"圆形",src:"7circle.demo.tsx"},{id:"colors",title:"色阶",src:"8colors.demo.tsx"},{id:"render",title:"自定义文案",src:"9render.demo.tsx"},{id:"props",depth:2,title:"属性"}]})]})}function u(r={}){const{wrapper:e}=r.components||{};return e?t(e,{...r,children:t(n,{...r})}):n(r)}export{u as default,o as frontmatter};
